<template>
    <div>
     <x-header :left-options="{showBack: false}" slot="header" >实验室设备管理系统</x-header>
        <div v-transfer-dom>
      <loading :show="upimg1" text="上传中..."></loading>
    </div>
  <group title="注册">
    <!-- <cell title="身份" :value="identity" is-link @click.native="showPopup=true"></cell> -->
    <x-input title="学号："  placeholder='(11位学号)' :max="11" v-model="user.id" label-width="80px"></x-input>
    <x-input title="姓名："   placeholder='(2-5个字符)' :min="2" :max="5" v-model='user.name' label-width="80px"></x-input>
    <x-input title="专业："   placeholder='(请输入专业名)' :max="10" v-model='user.major' label-width="80px"></x-input>
    <x-input title="邮箱："  placeholder='(请输入正确邮箱格式)' v-model='user.email' label-width="80px"></x-input>
    <x-input title="密码："  placeholder='(6-20位字母、数字)' :max="20" type='password' v-model='user.password' label-width="80px"></x-input>
    <x-input title="手机号：" placeholder='(11位手机号)' :max="11" v-model='user.phone' label-width="80px"></x-input>
    <cell title="选择头像:"> <div class="imageFileInput"><input type="file" name='file1' class='fileInput' accept="image/jpeg,image/jpg,image/png"  @change="getFile($event)" ref="avatarInput"> </div>
    <x-img :src="imgurl" :default-src="imgu" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
  </cell></group>      
    <box gap="10px 10px">
        <x-button type="primary" @click.native="reg($event)">注册</x-button>
       <p style="color:#1ffd19;float:right"> <cell is-link :link="{path: '/login'}"><a style="color: #bbb;">去登录</a></cell></p>
    </box> 
    <div v-transfer-dom>
      <popup v-model="showPopup" class="checker-popup">
        <div style="padding:10px 10px 40px 10px;">
          <checker
          v-model="identity"
          default-item-class="demo4-item"
          selected-item-class="demo4-item-selected"
          disabled-item-class="demo4-item-disabled">
            <checker-item value="学生" @on-item-click="onItemClick">学生</checker-item>
            <checker-item value="教师" @on-item-click="onItemClick">老师</checker-item>
          </checker>
        </div>
      </popup>
      <alert v-model="show14" title="提示">请选择身份！</alert>
      <alert v-model="show1" title="提示">学号不能为空！</alert>
      <alert v-model="show2" title="提示">姓名不能为空！</alert>
      <alert v-model="show3" title="提示">专业不能为空！</alert>
      <alert v-model="show4" title="提示">邮箱不能为空！</alert>
      <alert v-model="show5" title="提示">密码不能为空！</alert>
      <alert v-model="show6" title="提示">手机号不能为空！</alert>
      <alert v-model="show7" title="提示">请选择头像！</alert>
      <alert v-model="show8" title="提示">邮箱格式不对！</alert>
      <alert v-model="show9" title="提示">手机号格式不对！</alert>
      <alert v-model="show10" title="提示">学号开头不能为0！</alert>
      <alert v-model="show11" title="提示">密码不能少于六位！</alert>
      <alert v-model="show12" title="提示">请输入完整的姓名！</alert>
      <alert v-model="show13" title="提示">请输入11位学号！</alert>
    </div>
</div>
</template>
<script>
import {Checker, Popup, CheckerItem, Checklist, XInput, Cell, XHeader, Group, XImg, XButton, Box, Alert, Loading, TransferDomDirective as TransferDom} from 'vux'

export default {
  directives: {
    TransferDom
  },
  components: {
    Checklist,
    XImg,
    Cell,
    Checker,
    CheckerItem,
    XInput,
    Popup,
    Group,
    Loading,
    XButton,
    Box,
    XHeader,
    Alert
  },
  created () {
    this.imgu = require('@/assets/upImg.png')
  },
  methods: {
    onItemClick (value, disabled) {
      if (!this.disabled) {
        this.showPopup = false
      }
      if (value === '学生') {
        this.user.root = 0
      } else if (value === '学生') {
        this.user.root = 1
      }
    },
    getFile ($event) {
      this.upimg1 = true
      this.file = $event.target.files[0]
      let size = this.file.size / 1024
      // 上传图片
      if (size < 1000) {
        let propsData = new FormData()
        propsData.append('file', this.file)
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$http.post('/api/file/upload', propsData, config).then((res) => {
          this.user.image = res.data.content
          this.imgurl = '/api/' + this.user.image
          this.upimg1 = false
        })
      } else {
        alert('图片不能大于1M')
      }
    },
    reg () {
      var phonereg = /^1[0-9]{10}$/
      var emailreg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      // if (this.user.root === '') {
      //   this.show14 = true
      // } else
      if (this.user.id === '') {
        this.show1 = true
      } else if (this.user.id.substr(0, 1) === '0') {
        this.show10 = true
      } else if (this.user.id.length !== 11) {
        this.show13 = true
      } else if (this.user.name === '') {
        this.show2 = true
      } else if (this.user.name.length < 2) {
        this.show12 = true
      } else if (this.user.major === '') {
        this.show3 = true
      } else if (this.user.email === '') {
        this.show4 = true
      } else if (!emailreg.test(this.user.email)) {
        this.show8 = true
      } else if (this.user.password === '') {
        this.show5 = true
      } else if (this.user.password.length < 6) {
        this.show11 = true
      } else if (this.user.phone === '') {
        this.show6 = true
      } else if (!phonereg.test(this.user.phone)) {
        this.show9 = true
      } else if (this.user.image === '') {
        this.show7 = true
      } else {
        this.$http.post('/api/ac/register', this.user).then((res) => {
          if (res.data.code === 0) {
            this.$router.push('/login')
          } else {
            alert('注册失败！！')
          }
        })
      }
    }
  },
  data () {
    return {
      identity: '',
      showPopup: false,
      file: '',
      imgurl: '',
      imgu: '',
      user: {
        email: '',
        id: '',
        image: '',
        major: '',
        name: '',
        password: '',
        phone: '',
        root: '0'
      },
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false,
      show12: false,
      show13: false,
      show14: false,
      upimg1: false
    }
  }
}
</script>
<style>
.ximg-demo {
  margin: 5px;
  width: 100px;
  height: 100px;
}
.ximg-error {
  background: #fff;
}
.imageFileInput{
  width: 100px;
  height: 100px;
  position: absolute;
  /* // background: red; */
}

.demo4-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.demo4-item-selected {
  background-color: #FF3B3B;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}
.fileInput{
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
}
.ximg-error:after {
  content: '加载失败';
  color: red;
}
</style>
